<!-- 混凝土拌合站 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
        <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
      </el-col>

      <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" style="display: flex;justify-content: space-between;">
          <div>
            <el-button style="margin: 3px 0 0 0;" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
            <el-form-item label="拌合站" prop="identifier">
              <el-select v-model="queryParams.identifier" clearable placeholder="请选择" style="width: 130px;">
                <el-option v-for="item in stationList" :key="item.name" :label="item.name" :value="item.identifier"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="配比名称" prop="recipe">
              <el-input v-model="queryParams.recipe" clearable placeholder="配比名称" @keyup.enter.native="handleQuery" style="width: 130px;"/>
            </el-form-item>

            <el-form-item label="施工部位" prop="consPos">
              <el-input v-model="queryParams.consPos" clearable placeholder="施工部位" @keyup.enter.native="handleQuery" style="width: 130px;"/>
            </el-form-item>

            <!-- <el-form-item label="项目名称" prop="projName">
              <el-input v-model="queryParams.projName" clearable placeholder="项目名称" @keyup.enter.native="handleQuery"/>
            </el-form-item> -->

            <el-form-item label="生产时间" prop="id">
              <deatetime ref="deatetime" v-model="queryParams.time"> </deatetime>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['zhgd:hntManage:query']">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>

          <div>
            <el-form-item>
              <el-button type="success" icon="el-icon-thumb" size="mini" v-hasPermi="['zhgd:hntManage:collectTest']"
                :loading="warningLoading" @click="handleCollectData">数据采集测试</el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="success" icon="el-icon-thumb" size="mini" v-hasPermi="['zhgd:hntManage:check']"
                :loading="warningLoading" @click="handleWarning">手动校验</el-button>
            </el-form-item>
          </div>
        </el-form>

        <el-table border v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40" align="center" fixed />
          <el-table-column label="项目名称" align="center" prop="proj_name" width="85" show-overflow-tooltip />
          <el-table-column label="拌合站" align="center" prop="station_name" width="200" show-overflow-tooltip />
          <el-table-column label="施工部位" align="center" prop="cons_pos" width="170" show-overflow-tooltip />
          <el-table-column label="配比名称" align="center" prop="recipe" min-width="75" show-overflow-tooltip />
          <el-table-column label="生产方量" align="center" prop="prod_mete" width="75" show-overflow-tooltip />
          <el-table-column label="生产盘数" align="center" prop="pie_cnt" width="75" show-overflow-tooltip />
          <el-table-column label="生产开始时间" align="center" prop="prod_tim_b" width="135">
            <template slot-scope="scope"><span>{{ parseTime(scope.row.prod_tim_b, "{y}-{m}-{d} {h}:{i}:{s}")}}</span></template>
          </el-table-column>
          <el-table-column label="生产结束时间" align="center" prop="prod_tim_e" width="135">
            <template slot-scope="scope"><span>{{ parseTime(scope.row.prod_tim_e, "{y}-{m}-{d} {h}:{i}:{s}")}}</span></template>
          </el-table-column>
          <el-table-column label="客户名称" align="center" prop="customer" min-width="75" show-overflow-tooltip />
          <el-table-column label="施工地址" align="center" prop="proj_adr" width="100" show-overflow-tooltip />
          <el-table-column label="产品种类" align="center" prop="variety" width="75" show-overflow-tooltip />
          <el-table-column label="强度等级" align="center" prop="bet_lev" width="75" show-overflow-tooltip />
          <el-table-column label="车牌号" align="center" prop="vehicle" width="95" show-overflow-tooltip />
          <el-table-column label="驾驶员" align="center" prop="driver" width="70" show-overflow-tooltip />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="70" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetails(scope.row)" v-hasPermi="['zhgd:hntManage:diskData']">盘数据</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </el-col>
    </el-row>

    <!-- 添加或修改混凝土拌合站数据对话框 -->
    <el-dialog custom-class="hntbhz" :title="title" lock-scroll :visible.sync="open" width="70vw"  top="2vh" append-to-body>
      <el-table border v-loading="loadingTwo" :data="pieceListDetails" height="60vh" :cell-class-name="addClass">
        <el-table-column label="盘序号" align="center" prop="serial" width="60vw" show-overflow-tooltip />
        <el-table-column label="盘方量" align="center" prop="pieAmnt" width="60vw" show-overflow-tooltip>
          <template slot-scope="scope">{{ (scope.row.pieAmnt).toFixed(2) }}</template>
        </el-table-column>
        <el-table-column label="物料名称" align="center" min-width="100vw" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for=" dosage in scope.row.pieceDosageVos" :key="dosage.pkId">
              <div class="Tablelink TableL">{{ dosage.material || " " }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="物料用量" align="center" min-width="90vw">
          <template slot-scope="scope">
            <div v-for=" dosage in scope.row.pieceDosageVos" :key="dosage.pkId">
              <div class="Tablelink TableL">{{ dosage.factAmnt || " " }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="配比值" align="center" min-width="90vw">
          <template slot-scope="scope">
            <div v-for=" dosage in scope.row.pieceDosageVos" :key="dosage.pkId">
              <div class="Tablelink TableL">{{ dosage.planAmnt.toFixed(2) || "0" }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="施工配比" align="center" min-width="90vw">
          <template slot-scope="scope">
            <div v-for=" dosage in scope.row.pieceDosageVos" :key="dosage.pkId">
              <div class="Tablelink TableL">{{ (dosage.planAmnt/scope.row.pieAmnt).toFixed(2) || "0" }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="误差用量" align="center" min-width="90vw">
          <template slot-scope="scope">
            <div v-for=" dosage in scope.row.pieceDosageVos" :key="dosage.pkId">
              <div class="Tablelink TableL">{{ (dosage.errorValue || 0).toFixed(2) || "0" }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="误差百分比" align="center" min-width="90vw">
          <template slot-scope="scope">
            <div v-for=" dosage in scope.row.pieceDosageVos" :key="dosage.pkId">
              <div class="Tablelink TableL" >{{ (dosage.percentError || 0).toFixed(2) || "0" }}%</div>
            </div>
          </template>
        </el-table-column>

        <!-- 操作只做测试用 -->
        <el-table-column label="操作" align="center" prop="pieAmnt" width="120vw" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleTest(scope.row)" v-hasPermi="['zhgd:hntManage:ceShi']">测试</el-button>
            <el-button size="mini" type="text" @click="handleCorrect(scope.row)" v-hasPermi="['zhgd:hntManage:correct']">修正</el-button>
          </template>
        </el-table-column>
        <!-- 操作只做测试用 -->
      </el-table>

      <pagination v-show="totalTwo > 0" :total="totalTwo" :page.sync="queryParamsTwo.pageNum"
        :limit.sync="queryParamsTwo.pageSize" @pagination="getDetailsList" />

      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { productListData, deptListData, pieceListData, addCement1Data, updateCement1Data, warningList ,listTest,handleCorrect } from "@/api/zhgd/hntManage";
import deatetime from "@/components/Datetime"; // 生产日期
import workSiteLeft from "@/views/components/workSiteLeft";
import { businessDeptTreeTop } from "@/api/common/common"; // 公司列表
import { testCollectData} from "@/api/zhgd/hntManage";

export default {
  name: "HntManage",
  data() {
    return {
      stationCode:"",
      identifier: "",
      show: true,
      rowObj: {
        T1: 3,
        T2: 24,
        T3: 21,
        T4: 24,
        F1: 0,
        F2: 0,
        F3: 24,
        F4: 24,
      },
      pk_id: "",
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: false,
      loadingTwo: false,
      // 手动预警
      warningLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      totalTwo: 0,
      // 混凝土拌合站数据表格数据
      productList: [],
      // 盘数据列表
      pieceListDetails: [],
      // 拌合站搜索框数据
      stationList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParamsTwo: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [{ required: true, message: "数据主键不能为空", trigger: "blur" }],
      },
    };
  },
  components: {
    deatetime,
    workSiteLeft,
  },
  created() {
    this.getList();
    this.getProjectList();
  },
  methods: {
    //采集数据测试
    handleCollectData(){
      this.$confirm('正式系统禁止采集数据！', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass:'confirm-model',
        type: 'warning',
      }).then(_ => {
        console.log("采集数据测试")
        console.log("_______________________________"+this.queryParams.id)
        testCollectData('hnt',this.queryParams.id).then(res=>{
          this.getList()
          console.log("成功")
        })
      })
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 2 || columnIndex == 3 || columnIndex == 4 || columnIndex == 5 || columnIndex == 6 || columnIndex == 7) {
        //此判断为前两列
        return "addBorder";
      }
    },
    // 左侧树点击事件
    showLeft(show) {
      this.show = !show;
    },
    queryVal(val) {
      this.queryParams.id = val.id;
      this.handleQuery();
      this.getProjectList();
    },
    /** 查询混凝土拌合站数据列表 */
    getList() {
      this.loading = true;
      productListData(this.queryParams).then((response) => {
        this.productList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 查询拌合站列表 */
    getProjectList() {
      deptListData(this.queryParams).then((response) => {
        this.stationList = response;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        baseCode: undefined,
        projName: undefined,
        startTime: undefined,
        endTime: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams = this.getSearchParams();
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getSearchParams() {
      const params = {};
      for (const key in this.queryParams) {
        if (key === "time") {
          const time = this.queryParams[key];
          if (time && time.length === 2) {
            params.startTime = time[0];
            params.endTime = time[1];
          }
        } else {
          params[key] = this.queryParams[key];
        }
      }
      return params;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.workSiteLeft.resetQuery();
      this.queryParams.id = "";
      this.$refs.deatetime.startTime = null;
      this.$refs.deatetime.endTime = null;
      this.queryParams.time = [];
      this.queryParams.startTime = "";
      this.queryParams.endTime = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.pk_id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加混凝土拌合站数据";
    },
    // 手动校验
    handleWarning() {
      this.$confirm('正式系统禁止手动预警！', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass:'confirm-model',
        type: 'warning',
      }).then(_ => {
        this.warningLoading = true
        if(this.ids.length) {
          warningList({ ids: this.ids }).then((response) => {
            this.warningLoading = false
            if(response.code == 200) {
              this.$message.success('手动校验成功！')
              this.resetQuery()
            }else {
              this.$message.error('手动校验失败！')
            }
          }).catch(
            (err) => {
              this.$message.error('手动校验失败！')
              this.warningLoading = false
            }
          )
        }else {
          this.warningLoading = false
          this.$message.error('请先在表格内勾选您要校验的数据！')
        }
      })
    },
    // 盘数据
    handleDetails(row) {
      this.loading = true;
      this.reset();
      this.pk_id = row.pk_id;
      this.stationCode = row.stationCode
      pieceListData({ ...this.queryParamsTwo, pk_id: this.pk_id }).then((response) => {
        this.pieceListDetails = response.data.records;
        this.totalTwo = response.data.total;
        this.loading = false;
        this.form = response.data;
        this.open = true;
        this.title = "盘数据";
      });
    },
    getDetailsList() {
      this.loadingTwo = true;
      pieceListData({ ...this.queryParamsTwo, pk_id: this.pk_id }).then((response) => {
        this.pieceListDetails = response.data.records;
        this.totalTwo = response.data.total;
        this.loadingTwo = false;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateCement1Data(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addCement1Data(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download("zhgd/cement1Data/export", {
        ...this.queryParams
      }, `hntManage_${new Date().getTime()}.xlsx`);
    },
    // 点击盘数据列表测试按钮  只做测试用
    handleTest(row) {
      // const pkId = row.pkId || this.ids
      listTest(this.pk_id).then((response) => {
        // console.log('测试',response)
      });
    },
    handleCorrect(){
      handleCorrect(this.pk_id).then(res=>{
        this.pieceListDetails = [];
        this.getDetailsList()
      })

    }
    // 点击盘数据列表测试按钮  只做测试用
  },
};
</script>

<style lang="scss">
.hntbhz {
  .addBorder {
    padding: 0;

    .cell {
      padding: 0 !important;
    }

    .Tablelink {
      border-top: 1px solid #dfe6ec;
    }

    .TableL {
      padding: 5px 0;
      border-right: 1px solid #dfe6ec;
    }

  }
}
</style>
<style>
.confirm-model{
.el-message-box__btns {
.el-button:nth-child(1) {
  float:right;
}
.el-button:nth-child(2) {
  margin-right:10px;
  /*background-color:#2d8cf0;*/
  /*border-color:#2d8cf0;*/
}
}
}
</style>


